﻿/*Start*/
html,body{ width: 100%; height: 100% !important; position:relative; background: #fafafa;}
/*禁止文本选中*/
.none_sele{
 -webkit-user-select:none;
 -ms-user-select:none;
 user-select:none;
}
.ant_time{
 -webkit-transition: 400ms;
 -moz-transition: 400ms;
 transition: 400ms;
}
.dn{
 display: none !important;
}
/*框架*/
.layout{
 width: 100%;
 height: 100%;
 position: relative;
}
.layout-l{
 float: left;
 width: 70%;
 height: 100%;
 overflow: hidden;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 5;
}
.iframe-mask{
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 5;
 /*overflow-x: hidden;*/
 /*overflow-y: auto;*/
 overflow: auto;
}
.layout-l iframe{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 4;
}
.layout-r{
 float: left;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 10;
 width: 30%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: auto;
 background: #fff;
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
 /*filter:drop-shadow(0 0 10px rgba(0,0,0,0.5));*/
 /*-webkit-filter:drop-shadow(0 0 10px rgba(0,0,0,0.5));*/

}

/*右侧按钮*/
.layout-btn-r{
 position: absolute;
 display: block;
 left: 70%;
 top: 50%;
 margin-top: -20px;
 width: 20px;
 height: 60px;
 margin-left: -20px;
 -webkit-border-radius: 20px 0 0 20px;
 -moz-border-radius: 20px 0 0 20px;
 border-radius: 20px 0 0 20px;
 background: #bbb;
 filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
 -webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
 clip: rect(-6px 20px 66px -6px);
 z-index: 19;
 font-family: "SimSun";
 color: #fff;
 font-weight: bold;
 line-height: 60px;
 text-align: center;
 cursor: pointer;
 -moz-user-select:none;
 -webkit-user-select:none;
 -ms-user-select:none;
 user-select:none;
 font-style: normal;
}
.layout-btn-r:hover{
 background: #ddd;
}
/*标题*/
.title_type{
 background: #ddd;
 padding: 10px;
}
.type_switch{
 float: right;
 display: inline-block;
 height: 100%;
 padding: 0 10px;
 cursor: pointer;
 user-select: none;
}
.type_switch:hover{
 background: #fff;
 box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.type_switch:active{
 box-shadow: 0 0 0 rgba(0,0,0,0.4);
 transition: 200ms;
}
/*列表*/
.attr_list{
 padding: 10px 30px;
 line-height: 0;

}
.attr_list li{
 margin-bottom: 5px;
}
.title_attr{
 margin-bottom: 5px;
 line-height: 2;
 font-weight: bold;
 font-size: 16px;
}
.attr-open{
 float: right;
 display: inline-block;
 width: 10px;
 height: 10px;
 margin-top: 11px;
 background: url("../images/switch.svg") no-repeat center center / contain;
 transform: rotateX(180deg);
 opacity: 0;
 transition: 300ms;
}
.attr-open.open-close{
 transform:  rotateX(0deg);
}
.title_attr:hover .attr-open{
 opacity: 0.5;
}
.title_attr a{ color:#333;}
.title_attr a:hover{ color: Orange; text-decoration: underline;}
.title_attr a:active{ color: #333;}

.attr_exp{
 display: block;
 padding-left: 20px;
 line-height: 1.4;
 font-size: 13px;
}

/*追加*/
.attr_list ul{
 display: inline-block;
 vertical-align: top;
 width: 100%;
}
.attr_list ul li{
 float: left;
 width: 80px;
 text-align: center;
}
.attr_list .title_attr{
 margin-bottom: 15px;
 /*background: #eee;*/
 /*padding: 0 15px ;*/
 border-bottom: 1px solid #eee;
}
.attr_list a{
 display: inline-block;
 vertical-align: top;
 text-align: center;
 word-break: break-all;
 position: relative;
}
.ico-mod{
 display: block;
 width: 50px;
 height: 40px;
 background: #eee;
 border: 1px solid #eee;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
}
.ico-mod.nobg{
 background: none !important;
 border-color: transparent !important;
}
.ico-img{
 display: block;
 width: 50px;
 height: 40px;

 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
 position: absolute;
}
.ico-img img{
 width: 100%;
 height: 100%;
 object-fit: contain;
}
.mod-tit{
 font: normal 12px/20px "Microsoft YaHei";
 display: block;
 color: #666666;
}

.attr_list a.on{

}
.attr_list a.on .ico-mod{
 background: #1e73bd;
 border-color: #1e73bd;
}
.attr_list a.on .ico-mod.nobg{

}
.attr_list a.on .ico-img{
 left: -50px;
  filter: drop-shadow(50px 0 0 #1e73bd);
 -webkit-filter: drop-shadow(50px 0 0 #1e73bd);
}

.attr_list a.on .mod-tit{
 color: #1e73bd;
}
.layout-show{
 width: 100%;
 height: 100%;
 overflow: auto;
}



/*模块显示*/
.ant_show{
  opacity: 0;
  position: relative;
  left: 0;
  top: 20px;
  animation: antOption 300ms 100ms 1;
  animation-fill-mode: forwards;
}

@keyframes antOption {
 from{
   opacity: 0;
   top: 20px;
 }
  to{
    opacity: 1;
    top: 0;
  }
}









